"use client";

import {
  Menu,
  MenuButton,
  MenuList,
  MenuItem,
  IconButton,
} from "@chakra-ui/react";
import { AddIcon } from "../Icons/AddIcon";

function InsertMacroAction({ onInsert }: { onInsert: (type: string) => void }) {
  return (
    <div>
      <Menu offset={[-56, -48]} strategy="fixed">
        {({ isOpen }) => (
          <>
            <MenuButton
              isActive={isOpen}
              as={IconButton}
              size={"xs"}
              icon={
                <AddIcon
                  className={
                    isOpen
                      ? "w-5 h-5 rotate-45 transition-all"
                      : "w-5 h-5 transition-all"
                  }
                />
              }
              variant="outline"
              className="border !border-line-2 hover:!border-blue-1  [&_path]:!fill-white [&_path]:hover:!fill-blue-1 data-[open=true]:!border-blue-1 [&_path]:data-[open=true]:!fill-blue-1"
              data-open={isOpen}
            />
            <MenuList className="!min-w-20 text-sm mt-12 mx-4">
              <MenuItem onClick={() => onInsert("mouse")}>
                插入鼠标按键
              </MenuItem>
              <MenuItem onClick={() => onInsert("keyboard")}>
                插入键盘按键
              </MenuItem>
              <MenuItem onClick={() => onInsert("time")}>插入延时时间</MenuItem>
            </MenuList>
          </>
        )}
      </Menu>
    </div>
  );
}

export default InsertMacroAction;
